const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const mockServer = require('./mock/server');

module.exports = {
    // 让 webpack 知道以哪个模块为入口，做依赖收集
    // 具体参考 https://webpack.js.org/concepts/#entry
    entry: {
        index: './src/index.js'
    },
    //   entry: "./src/index.js",
    // 告诉 webpack 打包好的文件存放在哪里，以及怎么命名
    // 具体参考 https://webpack.js.org/concepts/#output
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    module: {
        // 使用 babel-loader 编译 es6/7/8、ts 和 jsx 语法
        // 注意：这里没有配置 preset，而是在 babel.config.js 文件里面配置
        rules: [
            {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /.(png|jpg|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]'
                    }
                }
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                enforce: 'pre', // 强制在 babel 之前执行
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        useEslintrc: false,
                        eslintPath: require.resolve('eslint'),
                        baseConfig: {
                            // 同时需要安装：
                            // babel-eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
                            extends: [require.resolve('eslint-config-react-app')]
                        }
                    }
                }
            }
        ]
    },
    plugins: [
        // 这里通常想要指定自己的 html 文件模板，也可以指定生成的 html 的文件名
        // 如果不传参数，会有一个默认的模板文件
        // 具体参考 https://github.com/jantimon/html-webpack-plugin
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // webpack-dev-server 提供了很多 api 可以做定制化的需求
    // 可以参考文档：https://webpack.js.org/configuration/dev-server/
    devServer: {
        after: (app, server, compiler) => {
            mockServer(app);
        }
    }
};
